<template>
  <div class="apply">
    <div class="banner">
      <div class="wh-1200 auto banner-txt pt-50">
        <h1>金融信贷</h1>
        <span>Finance Credit</span>
      </div>
    </div>
    <div class="content-box wh-1200 auto pb-100">
      <breadcrumb SecondcrumbsUrl="/AttractInvestment" ThreecrumbsTitle="金融服务申请" SecondcrumbsTitle="金融服务"></breadcrumb>
      <!-- 导航栏结束 -->
      <div class="main">
        <div class="content-txt">
          <!-- <div class="content-title">
            <h1>{{ Info.title }}</h1>
            <div class="bar pb-24">
              <span class="date">发布时间：{{ Info.createTime }}</span>
              <span class="source pl-24"> 来源：{{ Info.source }}</span>
            </div>
          </div> -->

          <!-- <div class="img-box mr-20 mb-40 f-left">
            <img v-if="Merchantsinfo.cover" :src="Merchantsinfo.cover" alt="">
          </div> -->
          <div>
            <a-descriptions title="金融服务信息" bordered :column="2">

              <a-descriptions-item label="发布机构">
                {{ Merchantsinfo.pubInstitution }}
              </a-descriptions-item>
              <a-descriptions-item label="服务名称">
                {{ Merchantsinfo.name }}
              </a-descriptions-item>

              <a-descriptions-item label="服务类型">
                <a-tag color="green">{{
                  getDictLabel(Merchantsinfo.type, prodcutTypes) }}</a-tag>
                <!-- {{ Merchantsinfo.type }} -->
              </a-descriptions-item>
              <a-descriptions-item label="贷款方式">
                <a-tag color="blue">{{
                  getDictLabel(Merchantsinfo.loanType, loanTypes) }}</a-tag>
                <!-- {{ Merchantsinfo.loanType }} -->
              </a-descriptions-item>
              <a-descriptions-item label="服务概述">
                {{ Merchantsinfo.desc }}
              </a-descriptions-item>
              <a-descriptions-item label="参考利率">
                {{ Merchantsinfo.rate }}%
              </a-descriptions-item>
              <a-descriptions-item label="机构名称">
                {{ Merchantsinfo.pubInstitution }}
              </a-descriptions-item>
              <a-descriptions-item label="服务链接">
                <a target="_blank" :href="'http://' + Merchantsinfo.linkAddress">{{ Merchantsinfo.linkAddress }}</a>
              </a-descriptions-item>
              <a-descriptions-item label="联系方式">
                {{ Merchantsinfo.contactNumber }}
              </a-descriptions-item>
              <a-descriptions-item label="联系人">
                {{ Merchantsinfo.contact }}
              </a-descriptions-item>
              <a-descriptions-item label="截止日期">
                <span style="color:#08f">{{ Merchantsinfo.closeDate }}</span>
              </a-descriptions-item>
            </a-descriptions>
          </div>

          <a-card class="mt-40">
            <h1 class="form-title">上传申请信息</h1>
            <a-form-model ref="ruleForm" :model="form" :rules="rules" class="mt-10" :label-col="{ span: 2 }"
              :wrapper-col="{ span: 14 }">
              <a-form-model-item label="联系人：" prop="linkMan">
                <a-input v-model="form.linkMan" placeholder="请输入联系人" />
              </a-form-model-item>
              <a-form-model-item label="联系方式：" prop="linkMan">
                <a-input v-model="form.linkTel" placeholder="请输入联系方式" />
              </a-form-model-item>
              <a-form-model-item label="邮箱：" prop="email">
                <a-input v-model="form.email" placeholder="请输入邮箱" />
              </a-form-model-item>
              <a-form-model-item label="开户银行：" prop="region">
                <a-input v-model="form.depositBank" placeholder="请输入开户银行" />
              </a-form-model-item>
              <a-form-model-item label="开户行帐号：" prop="region">
                <a-input v-model="form.depositBankNo" placeholder="请输入开户行帐号：" />
              </a-form-model-item>
              <a-form-model-item label="财务报表" prop="financialStatements">
                <a-upload :action="UploadUrl" :headers="headers" :before-upload="beforeUpload"
                  @change="(info) => handleChange(info, form.financialStatements)" :show-upload-list="false">
                  <a-button type="primary"> 申请资料</a-button>
                </a-upload>
                <div>
                  <div class="files_box" v-for="(item, index) in form.financialStatements" :key="index">
                    <a :href="item.fileUrl" target="_blank" download="">{{ item.fileName }}</a>
                    <a-icon @click="DelImg(index, form.financialStatements)" class="close" type="close" />
                  </div>
                </div>
              </a-form-model-item>

              <!-- <a-form-model-item label="经营计划" prop="businessPlan">
                <a-upload :action="UploadUrl" :headers="headers" :before-upload="beforeUpload"
                  @change="(info) => handleChange(info, form.businessPlan)" :show-upload-list="false">
                  <a-button type="primary"> 上传附件</a-button>
                </a-upload>
                <div>
                  <div class="files_box" v-for="(item, index) in form.businessPlan" :key="index">
                    <a :href="item.fileUrl" target="_blank" download="">{{ item.fileName }}</a>
                    <a-icon @click="DelImg(index, form.businessPlan)" class="close" type="close" />
                  </div>
                </div>
              </a-form-model-item>

              <a-form-model-item label="资产负债表" prop="balanceSheet">
                <a-upload :action="UploadUrl" :headers="headers" :before-upload="beforeUpload"
                  @change="(info) => handleChange(info, form.balanceSheet)" :show-upload-list="false">
                  <a-button type="primary"> 上传附件</a-button>
                </a-upload>
                <div>
                  <div class="files_box" v-for="(item, index) in form.balanceSheet" :key="index">
                    <a :href="item.fileUrl" target="_blank" download="">{{ item.fileName }}</a>
                    <a-icon @click="DelImg(index, form.balanceSheet)" class="close" type="close" />
                  </div>
                </div>
              </a-form-model-item>

              <a-form-model-item label="现金流量表" prop="cashTatement">
                <a-upload :action="UploadUrl" :headers="headers" :before-upload="beforeUpload"
                  @change="(info) => handleChange(info, form.cashTatement)" :show-upload-list="false">
                  <a-button type="primary"> 上传附件</a-button>
                </a-upload>
                <div>
                  <div class="files_box" v-for="(item, index) in form.cashTatement" :key="index">
                    <a :href="item.fileUrl" target="_blank" download="">{{ item.fileName }}</a>
                    <a-icon @click="DelImg(index, form.cashTatement)" class="close" type="close" />
                  </div>
                </div>
              </a-form-model-item> -->
              <a-form-model-item label="附言：" prop="postscript">
                <a-textarea :auto-size="{ minRows: 3, maxRows: 3 }" v-model="form.postscript" placeholder="请输入附言" />
              </a-form-model-item>

            </a-form-model>

          </a-card>
          <a-card class="btn-box">
            <div>
              <!-- 跳转到填写资料页面 -->
              <a-button type="primary" @click="handleApply">申请</a-button>
              <a-button @click="$router.back">返回</a-button>

            </div>
          </a-card>



        </div>
      </div>
    </div>

  </div>
</template>
<script>

import breadcrumb from '@/components/breadcrumb/breadcrumb.vue'
import { getClientCreInfo } from '@/apis/cre/crePord'
import { getDicts } from "@/apis/system";
import { getToken, getCookiesUserInfo } from "@/utils/auth"; // get token from cookie
import { creApplicationAdd, creApplicationEdit } from '@/apis/cre/crePordApplication'
import { creApplicationById } from "@/apis/cre/creApplication"
export default {


  components: {
    breadcrumb
  },
  data () {
    return {
      merchantsid: "",
      appalyId: '',
      Merchantsinfo: {},
      loanTypes: [],
      prodcutTypes: [],
      UploadUrl: GolbUrl.BASIC_UPLOAD_URL,
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      form: {
        financialStatements: [],
        businessPlan: [],
        balanceSheet: [],
        cashTatement: [],
        depositBank: null,
        depositBankNo: null,
        postscript: null,
        linkMan: null,
        linkTel: null,
        email: null,
      },
      rules: {
        linkMan: [
          {
            required: true,
            message: "请输入联系人",
            trigger: "blur",
          },
        ],
        linkTel: [
          {
            required: true,
            message: "请输入联系方式",
            trigger: "blur",
          },
        ],
        // financialStatements: [
        //   {
        //     required: true,
        //     message: "请上传财务报表",
        //     trigger: "blur",
        //   },
        // ],
        // businessPlan: [
        //   {
        //     required: true,
        //     message: "请上传经营计划",
        //     trigger: "blur",
        //   },
        // ],
        // balanceSheet: [
        //   {
        //     required: true,
        //     message: "请上传资产负债表",
        //     trigger: "blur",
        //   },
        // ],

        // cashTatement: [
        //   {
        //     required: true,
        //     message: "请上传现金流量表",
        //     trigger: "blur",
        //   },
        // ],
      },
    }
  },
  mounted () {
    this.merchantsid = this.$route.query.productId;
    this.appalyId = this.$route.query.id
    this.getentMerchantsinfo();
    this.getProdcutTypes()
    this.getLoanTypes();
    this.getApplyInfo()
  },
  methods: {
    // 移除附件
    DelImg (index, item) {
      item.splice(index, 1);
    },

    /** 提交申请 */
    handleApply () {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          const param = {
            id: this.appalyId,
            productId: this.merchantsid,
            financialStatements: JSON.stringify(this.form.financialStatements),
            businessPlan: JSON.stringify(this.form.businessPlan),
            balanceSheet: JSON.stringify(this.form.balanceSheet),
            cashTatement: JSON.stringify(this.form.cashTatement),
            companyId: JSON.parse(getCookiesUserInfo()).companyId,
            userId: JSON.parse(getCookiesUserInfo()).userId,
            applicationStatus: 1, //初审
            approvalStatus: 0,//待审核
            depositBank: this.form.depositBank,
            depositBankNo: this.form.depositBankNo,
            postscript: this.form.postscript,
            linkMan: this.form.linkMan,
            linkTel: this.form.linkTel,
            email: this.form.email,
          }
          console.log('getCookiesUserInfo', JSON.parse(getCookiesUserInfo()));

          console.log('param', param);

          // return
          const res = await creApplicationEdit(param)
          if (res.code == 200) {
            this.$message.success("申请成功")
            this.$router.back()
          }
        }
      })





    },
    /** 获取贷款类型字典 */
    async getLoanTypes () {
      const { data } = await getDicts("cre_loan_type");
      this.loanTypes = data
    },
    /** 获取信贷产品类型字典 */
    async getProdcutTypes () {
      const { data } = await getDicts("cre_product_type");
      this.prodcutTypes = data
      console.log('this.prodcutTypes', this.prodcutTypes);
    },
    getDictLabel (val, array) {
      return array.find(item => item.dictValue == val)?.dictLabel
    },

    /**获取申请详情 */
    async getApplyInfo () {
      const res = await creApplicationById(this.appalyId)
      console.log('getApplyInfo', res);
      this.form.financialStatements = JSON.parse(res.data.financialStatements)
      this.form.businessPlan = JSON.parse(res.data.businessPlan)
      this.form.balanceSheet = JSON.parse(res.data.balanceSheet)
      this.form.cashTatement = JSON.parse(res.data.cashTatement)
      this.form.depositBank = res.data.depositBank
      this.form.depositBankNo = res.data.depositBankNo
      this.form.postscript = res.data.postscript
      this.form.linkMan = res.data.linkMan
      this.form.linkTel = res.data.linkTel
      this.form.email = res.data.email
      // form: {
      //   financialStatements: [],
      //   businessPlan: [],
      //   balanceSheet: [],
      //   cashTatement: []
      // },

    },


    //获取详情
    getentMerchantsinfo () {
      // let _params = {
      //   id: this.merchantsid,
      // };
      getClientCreInfo(this.merchantsid)
        .then((res) => {
          if (res.code == 200) {
            this.Merchantsinfo = res.data;
          }
        })
        .catch((error) => { });
    },


    beforeUpload (file) {
      console.log('file', file);
      let _type = file.name.substring(file.name.indexOf("."));
      const isJpgOrPng =
        _type === ".doc" ||
        _type === ".docx" ||
        _type === ".wps" ||
        _type === ".pdf" ||
        _type === ".xls" ||
        _type === ".xlsx";

      if (!isJpgOrPng) {
        this.$message.warning("请上传正确的文件格式");
        return false;
      }
      const isLt2M = file.size / 1024 / 1024 < 5;
      if (!isLt2M) {
        this.$message.warning("请上传5M以内的大小图片");
        return false;
      }
      return isJpgOrPng && isLt2M;
    },

    handleChange (info, item) {

      if (info.file.status === "uploading") {
        this.loading = true;
        return;
      }
      if (info.file.status === "done") {
        console.log('handleChange', info);
        // Get this url from response in real world.
        let _files = {
          // id: "",
          fileName: info.file.name,
          // fileType: info.file.type,
          fileUrl: info.file.response.data.url,
          // objctType: this.form.type == 1 ? 3 : 4, //1:产品图片;2:产品资质荣誉;3:企业资质;4:企业荣誉奖项;5:招商附件;6:招标附件
        };
        item.push(_files);
      }
    },
  }
}
</script>
<style lang="less" scoped>
.apply {
  background-color: @bg-color-f5f;

  .banner {
    background: url("../../../assets/images/attract.png") no-repeat center;
    height: 200px;

    h1 {
      height: 60px;
      line-height: 60px;
      color: rgb(7, 41, 71);
      font-size: @font36;
      font-weight: lighter;
    }

    span {
      font-size: @font36;
      color: rgba(7, 41, 71, 58%);
    }
  }

  .main-title {
    img {
      width: 35px;
      height: 35px;
      margin-right: 16px;
      vertical-align: middle;
      margin-top: -10px;
    }

    span {
      font-family: Microsoft YaHei;
      font-size: @font26;
      line-height: @font26;
      font-weight: 700;
      color: @text-color-303;
    }
  }

  .nav-box {
    margin: 24px 0;
    height: 56px;
    background-color: #ffffff;
    box-shadow: 0px 6px 20px 0px rgba(24, 138, 241, 0.16);
    border-radius: 6px;

    .nav-text {
      line-height: 56px;
      margin-left: 29px;
      font-size: @font16;
      font-weight: normal;
      color: @text-color-606;

      .nav-Detail {
        color: @color-188;
      }
    }
  }
}

.img-box {
  width: 100%;
  background-color: #ffffff;
  border: solid 1px #dcdfe6;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 10px solid #fff;
  box-shadow: 0px 6px 20px 0px rgba(24, 138, 241, 0.16);

  img {
    width: 100%;
    height: 400px;
    object-fit: cover;
  }
}

.form-title {
  height: 60px;
  line-height: 60px;
  color: rgb(7, 41, 71);
  font-size: 16px;
  font-weight: bold;
}

.btn-box {
  width: 100%;
  margin: 30px auto 0;
  text-align: center;

  button {
    width: 200px;
    margin: 0 20px;
  }
}

.files_box {
  position: relative;
  background-color: #f3f3f3;
  padding: 0 5px;
  margin-top: 10px;

  &:hover {
    .close {
      display: block;
    }
  }

  .close {
    position: absolute;
    right: 10px;
    top: 12px;
    cursor: pointer;
    color: #fff;
    background-color: #188af1;
    width: 16px;
    height: 16px;
    border-radius: 100%;
    line-height: 20px;
    vertical-align: middle;
    display: none;
  }
}
</style>